<template>
    <div class="wrapper">
        <hr class="hr-solid-content" data-content="概念">
        <p class="desc">层叠上下文（stacking context）是HTML元素的三维概念，这些元素在z轴上形成一个层叠的栈结构。每个层叠上下文的子元素都会在这个层叠上下文中进行层叠排列。</p>
        <p class="desc">层叠顺序：backgroud/boder < 负z-index < block盒子 < float盒子 < inline/inline-block盒子 < z-index: auto,z-index: 0;不依赖z-index的层叠上下文 < 正z-index</p>

        <div style="position: relative; z-index: 0;background: #544;width: 100%; height: 300px;">
            <span style="display: inline-block;width: 200px;height: 100px;background: #789;margin-left: -180px; margin-top: 140px;">line-block元素</span>
            <div style="float: left; width: 200px;height: 100px; background: #222;color: #fff;margin-left: 60px; margin-top: 100px;">浮动元素</div>
            <div style="width: 200px;height: 100px;background: #999;margin-top: -180px;margin-left: 40px;"><div style="position: absolute;">block元素</div></div>
            <div style="position: absolute; z-index: -9; width: 200px;height: 100px; background: #333;color: #fff; left: 20px; top: 20px;">z-index: -9;</div>
            <div style="position: absolute; z-index: 9; width: 200px;height: 100px; background: #444;color: #fff; left: 100px; top: 180px;">z-index: 9;</div>
        </div>

        <hr class="hr-solid-content" data-content="层叠上下文的形成条件">
        <div>1. 根元素（html）</div>
        <div>2. position为absolute或relative且z-index值不为auto的元素</div>
        <div>3. position为fixed或sticky的元素</div>
        <div>4. flex容器的子元素，且z-index值不为auto</div>
        <div>5. opacity值小于1的元素</div>
        <div>6. transform值不为none的元素</div>
        <div>7. mix-blend-mode值不为normal的元素</div>
        <div>8. filter值不为none的元素</div>
        <div>9. isolation值为isolate的元素</div>
        <div>10. will-change指定的属性值为(opacity,transform,mix-blend-mode,filter,isolation)</div>
        <div>11. 元素的-webkit-overflow-scrolling设为touch</div>
    </div>
</template>

<style scoped>
.wrapper {
    height: 100%;
    padding: 10px;
    overflow: auto;
}

.desc {
    font-size: 13px;
    color: #666;
}
</style>